<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<title>jQuery Mobile Demos - JAVA - Pruebas Movil</title>
		<link rel="shortcut icon" href="favicon.ico">
		<!-- CSS -->
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/default/jquery.mobile-1.4.0.min.css">
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/default/jquery.mobile.external-png-1.4.0.min.css">		
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/raul.min.css">
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/default/jquery.mobile.icons-1.4.0.min.css">
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/default/jquery.mobile.inline-png-1.4.0.min.css">
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/default/jquery.mobile.inline-svg-1.4.0.min.css">
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/default/jquery.mobile.structure-1.4.0.min.css">
		<link rel="stylesheet"  href="${pageContext.request.contextPath}/movil/css/themes/default/jquery.mobile.theme-1.4.0.min.css">
	    <!-- JS - JQUERY -->
		<script src="${pageContext.request.contextPath}/movil/js/jquery.js"></script>
		<script src="${pageContext.request.contextPath}/movil/js/jquery.mobile-1.4.0.min.js"></script>
		<style>
	      	#map-canvas {
	        	height: 400px;
	        	margin: 0px;
	        	padding: 0px
	      	}
    	</style>
	</head>
	<body>
			
		<!-- Pagina de Home -->
		<div data-role="page" id="home" data-theme="a" data-title="Pruebas | Home">
			<!-- Cabecera -->
			<div data-role="header">
				<h1>Home</h1>				
				<a href="#menu" data-icon="bars" data-iconpos="notext">Menu</a>
				<a href="<%=request.getContextPath()%>/logout" data-transition="turn" data-icon="action" data-iconpos="notext">Desconectar</a>
			</div>
			<!-- Fin Cabecera -->
			
			<!-- Panel de menu -->
			<div data-role="panel" id="menu" data-display="push" data-theme="b">
				<ul data-role="listview">
					<li><a href="#page2" data-icon="star" data-transition="slide">Página 2</a></li>
					<li><a href="#listado" data-icon="grid" data-transition="turn">Listado Alumnos</a></li>
					<li><a href="#mapa" data-icon="grid" data-transition="turn">Mapa</a></li>
				</ul>
			</div>
			<!-- Fin Panel de menu -->
			
			
			<!-- Contenido -->
			<div data-role="content">
				<a href="#page2" 
				   data-role="button"
				   data-theme="b" 
				   >Pagina 2</a>
				   
				<a href="#listado" 
				   data-role="button"
				   data-theme="b"
				   >Alumnos</a>
				  <a href="#mapa" data-role="button"
				   data-theme="b">Mapa</a>
				<form>
					<input type="text" />
					<label for="flip-2">Flip toggle:</label>
						<select name="flip-2" id="flip-2" data-role="slider">
		    				<option value="off">Off</option>
		    				<option value="on">On</option>
						</select>
					</form> 
			</div>
			<!-- Fin Contenido -->
			
			<!-- Pie -->
			<div data-role="footer">
				 <a href="#politica" data-rel="dialog" >Politica Privacidad</a>
			</div>
			<!-- Fin Pie -->
		</div>
		
		<!-- Pagina 2 -->
		<div data-role="page" id="page2" data-title="Pruebas | Pagina 2">
			<div data-role="header">
				<a href="#home"
				   data-icon="home"
				   data-role="button"
				   data-theme="b"
				   data-inline="true"
				   data-iconpos="notext" 
				   >Home</a>
				<h1>Titulo Página 2</h1>
			</div>
			<div data-role="content">
				<p>Lsectetur adipiscing elit. Pellentesque egestas ante vel velit tempus viverra. Sed dapibus quam et dapibus pellentesque. Duis in sagittis nibh. Cras feugiat id erat ac consequat. Nullam vel accumsan ipsum. Nunc ac dictum eros. Suspendisse euismod pulvinar quam porttitor sodales. Nunc venenatis auctor pharetra. Pellentesque nec dictum odio.</p>
			</div>
			
			<div data-role="footer">
				<h1>Pie de pagina</h1>
			</div>
		</div>
		
		<!-- Pagina Politica Privacidad -->
		<div data-role="page" id="politica" data-title="Pruebas | Politica Privacidad">
			<div data-role="header">
				
				<h1>Politica Privacidad</h1>
			</div>
			<div data-role="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum sem sapien, eget bibendum lorem iaculis in. Curabitur rhoncus, ligula ac ullamcorper ullamcorper, nibh tellus suscipit turpis, rhoncus dignissim nulla ipsum sit amet risus. Vivamus luctus mi eu tortor elementum pulvinar. Maecenas nec mattis diam. Proin accumsan porttitor ante, sit amet sagittis felis viverra vitae. Aenean fermentum metus in velit pellentesque, eu lacinia sem ultricies. Morbi iaculis tincidunt augue, feugiat venenatis quam dapibus et. Nam egestas neque quis varius rutrum. Nullam consectetur felis at ante tincidunt, lacinia viverra justo sagittis. Aliquam viverra sed nunc sagittis gravida. Cras rutrum congue leo sit amet fermentum. Donec congue felis at velit congue, venenatis convallis ante hendrerit. Donec sed rutrum quam. Cras auctor orci eu semper elementum. </p>
				<p>Pellentesque eget luctus sapien. Phasellus pretium purus ac est tristique, ut dictum sapien eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum euismod purus ac commodo. Donec tincidunt aliquet justo eu lacinia. Donec id leo tincidunt, scelerisque tellus at, egestas dui. Curabitur eget viverra libero. Donec et neque elit. Aenean auctor malesuada elit, at sagittis sapien laoreet et. Integer semper purus a nunc mattis, pretium lacinia risus fringilla. Proin a sollicitudin tellus. Donec tristique, elit id pellentesque tincidunt, justo quam fringilla risus, et congue justo velit non augue. Ut fringilla porta augue, eu sagittis lorem interdum quis. Curabitur at eros convallis, interdum purus in, tincidunt mauris. </p>
				<p>Praesent magna sapien, pretium id nunc sit amet, vestibulum porta leo. Vestibulum iaculis nibh vitae libero dictum, eu lobortis nunc pretium. Etiam a orci sed mi dapibus lacinia at nec nisi. Vestibulum pharetra augue vel ligula dapibus, vulputate accumsan est adipiscing. In hac habitasse platea dictumst. Quisque volutpat quis nulla vel pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nulla orci, bibendum vel nisl ac, feugiat consectetur erat. </p>
				<p>Suspendisse vitae lectus quam. Nullam justo risus, hendrerit eu eleifend quis, iaculis ut tortor. Sed posuere metus fermentum adipiscing tincidunt. Curabitur commodo tellus vel nisi lacinia dignissim. Morbi iaculis sit amet massa quis sagittis. Morbi commodo egestas eros bibendum commodo. Aliquam id ultricies tortor. </p>
				<p>In dignissim ac neque eu hendrerit. Pellentesque in risus in nisi sodales ullamcorper. Phasellus a elit sapien. Mauris condimentum, dui a tincidunt sodales, urna leo egestas nisi, a ultricies massa elit non nibh. Morbi non fermentum libero. Maecenas in libero at odio posuere laoreet a vel odio. Duis suscipit pellentesque augue sed semper. Nam aliquet arcu at erat porttitor, eget sagittis arcu ullamcorper. Ut sodales dapibus interdum. Phasellus sed enim purus. Donec id turpis sit amet massa sodales porttitor ut nec nulla. Etiam justo velit, scelerisque eu odio vitae, tempus tempor neque. Sed mauris diam, consequat placerat pulvinar eget, condimentum eget quam. Nullam non facilisis est. Duis ut tincidunt odio. </p>
			</div>
		</div>
		
		<!-- Pagina Listado -->
		<div data-role="page" id="listado" data-title="Pruebas | Listado Alumnos">
			<div data-role="header">
				<a href="#home"
				   data-icon="home"
				   data-role="button"
				   data-theme="b"
				   data-inline="true"
				   data-iconpos="notext" 
				   >Home</a>
				<h1>Listado Alumnos</h1>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-filter="true">
					<% for(int i=0; i<10; i++){
					%>
					<li><a href ="">Alumno: <%=i%></a></li>
					<%
					}%>
				</ul>
			</div>
			
			<div data-role="footer">
				<h1>Pie de pagina Listado de alumnos</h1>
			</div>
		</div>
		
		<div data-role="page" id="mapa" data-title="Pruebas | Mapa">
			<div data-role="header">
				<a href="#home"
				   data-icon="home"
				   data-role="button"
				   data-theme="b"
				   data-inline="true"
				   data-iconpos="notext" 
				   >Home</a>
				<h1>Mapa</h1>
			</div>
			<div data-role="content">
				<div id="map-canvas"></div>
			</div>
			
			<div data-role="footer">
				<h1>Pie de pagina</h1>
			</div>
		</div>
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>	
		<script>


		// Note: This example requires that you consent to location sharing when
		// prompted by your browser. If you see a blank space instead of the map, this
		// is probably because you have denied permission for location sharing.

		var map;

		function initialize() {
		  var mapOptions = {
		    zoom: 6
		  };
		  map = new google.maps.Map(document.getElementById('map-canvas'),
		      mapOptions);

		  // Try HTML5 geolocation
		  if(navigator.geolocation) {
		    navigator.geolocation.getCurrentPosition(function(position) {
		      var pos = new google.maps.LatLng(position.coords.latitude,
		                                       position.coords.longitude);

		      var infowindow = new google.maps.InfoWindow({
		        map: map,
		        position: pos,
		        content: 'Location found using HTML5.'
		      });

		      map.setCenter(pos);
		    }, function() {
		      handleNoGeolocation(true);
		    });
		  } else {
		    // Browser doesn't support Geolocation
		    handleNoGeolocation(false);
		  }
		}

		function handleNoGeolocation(errorFlag) {
		  if (errorFlag) {
		    var content = 'Error: The Geolocation service failed.';
		  } else {
		    var content = 'Error: Your browser doesn\'t support geolocation.';
		  }

		  var options = {
		    map: map,
		    position: new google.maps.LatLng(60, 105),
		    content: content
		  };

		  var infowindow = new google.maps.InfoWindow(options);
		  map.setCenter(options.position);
		}

		google.maps.event.addDomListener(window, 'load', initialize);


		
			$(document).ready(function(){
				
				//initialize();
				
				$.mobile.defaultDialogTransition='slideup';
				$.mobile.defaultPageTransition='flip';
				
			});
		</script>
	</body>
</html>